<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12 border-bottom white-bg dashboard-header" id="echartsMain">
            冷链操作平台是针对于百洋集团冷链运输业务的操作管理系统
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 border-bottom white-bg dashboard-header">
            <blockquote class="text-warning" style="font-size:16px">冷链操作平台是针对于百洋集团冷链运输业务的操作管理系统
                <br/><br/>基础资料-管理采集设备、保温箱、冷藏车
                <br/>装车单管理-管理装车单装箱关联、装车确认、签收确认等功能
                <br/>查询作业-提供采集设备信息、温度预警、装车单信息、设备指令的查询功能
                <br/>系统设置-提供常见的系统功能设置模块，如人员、权限等
                <br/>常见工具-提供计划作业功能
            </blockquote>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>更新日志</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div class="panel-body">
                        <c:forEach items="${relHistories}" var="relHistory">
                            <div class="panel-group" id="version">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#version"
                                               href="#${relHistory.id}">${relHistory.header}</a><code
                                                class="pull-right"><fmt:formatDate value="${relHistory.createDate}" pattern="yyyy.MM.dd" /> </code>
                                        </h5>
                                    </div>
                                    <div id="${relHistory.id}" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <ol>
                                                <li>${relHistory.content}</li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var dom = document.getElementById("echartsMain");
    var myChart = echarts.init(dom);
    var app = {};

    var option;



    // See https://github.com/ecomfe/echarts-stat
    echarts.registerTransform(ecStat.transform.clustering);
    const data = [
        [3.275154, 2.957587],
        [-3.344465, 2.603513],
        [0.355083, -3.376585],
        [1.852435, 3.547351],
        [-2.078973, 2.552013],
        [-0.993756, -0.884433],
        [2.682252, 4.007573],
        [-3.087776, 2.878713],
        [-1.565978, -1.256985],
        [2.441611, 0.444826],
        [-0.659487, 3.111284],
        [-0.459601, -2.618005],
        [2.17768, 2.387793],
        [-2.920969, 2.917485],
        [-0.028814, -4.168078],
        [3.625746, 2.119041],
        [-3.912363, 1.325108],
        [-0.551694, -2.814223],
        [2.855808, 3.483301],
        [-3.594448, 2.856651],
        [0.421993, -2.372646],
        [1.650821, 3.407572],
        [-2.082902, 3.384412],
        [-0.718809, -2.492514],
        [4.513623, 3.841029],
        [-4.822011, 4.607049],
        [-0.656297, -1.449872],
        [1.919901, 4.439368],
        [-3.287749, 3.918836],
        [-1.576936, -2.977622],
        [3.598143, 1.97597],
        [-3.977329, 4.900932],
        [-1.79108, -2.184517],
        [3.914654, 3.559303],
        [-1.910108, 4.166946],
        [-1.226597, -3.317889],
        [1.148946, 3.345138],
        [-2.113864, 3.548172],
        [0.845762, -3.589788],
        [2.629062, 3.535831],
        [-1.640717, 2.990517],
        [-1.881012, -2.485405],
        [4.606999, 3.510312],
        [-4.366462, 4.023316],
        [0.765015, -3.00127],
        [3.121904, 2.173988],
        [-4.025139, 4.65231],
        [-0.559558, -3.840539],
        [4.376754, 4.863579],
        [-1.874308, 4.032237],
        [-0.089337, -3.026809],
        [3.997787, 2.518662],
        [-3.082978, 2.884822],
        [0.845235, -3.454465],
        [1.327224, 3.358778],
        [-2.889949, 3.596178],
        [-0.966018, -2.839827],
        [2.960769, 3.079555],
        [-3.275518, 1.577068],
        [0.639276, -3.41284]
    ];
    var CLUSTER_COUNT = 6;
    var DIENSIION_CLUSTER_INDEX = 2;
    var COLOR_ALL = [
        '#37A2DA',
        '#e06343',
        '#37a354',
        '#b55dba',
        '#b5bd48',
        '#8378EA',
        '#96BFFF'
    ];
    var pieces = [];
    for (var i = 0; i < CLUSTER_COUNT; i++) {
        pieces.push({
            value: i,
            label: 'cluster ' + i,
            color: COLOR_ALL[i]
        });
    }
    option = {
        dataset: [
            {
                source: data
            },
            {
                transform: {
                    type: 'ecStat:clustering',
                    // print: true,
                    config: {
                        clusterCount: CLUSTER_COUNT,
                        outputType: 'single',
                        outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
                    }
                }
            }
        ],
        tooltip: {
            position: 'top'
        },
        visualMap: {
            type: 'piecewise',
            top: 'middle',
            min: 0,
            max: CLUSTER_COUNT,
            left: 10,
            splitNumber: CLUSTER_COUNT,
            dimension: DIENSIION_CLUSTER_INDEX,
            pieces: pieces
        },
        grid: {
            left: 120
        },
        xAxis: {},
        yAxis: {},
        series: {
            type: 'scatter',
            encode: { tooltip: [0, 1] },
            symbolSize: 15,
            itemStyle: {
                borderColor: '#555'
            },
            datasetIndex: 1
        }
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>